<template>
  <div style="height: 100%">
    <el-row :gutter="0" flex justify="space-between" align="middle">
      <el-col :span="6" class="vertical-center" style="--horizontal: center">
        <el-icon size="30">
          <BrushFilled />
        </el-icon>
      </el-col>
      <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
        <span class="top-title">中国人民银行</span>
      </el-col>
      <el-col :span="6" class="vertical-center" style="--horizontal: center">
        <el-dropdown trigger="hover" @visible-change="fade">
          <el-avatar
            :class="`off-left mouse ${show ? 'scale' : ''}`"
            size="default"
            src="https://wwc.alicdn.com/avatar/getAvatar.do?userNick=tb752397766&width=50&height=50&type=sns&_input_charset=UTF-8"
            icon="UserFilled"
          ></el-avatar>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>我的信息</el-dropdown-item>
              <el-dropdown-item>我的设置</el-dropdown-item>
              <el-dropdown-item>安全中心</el-dropdown-item>
              <el-dropdown-item @click="exit" divided>退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-color-picker
          color-format="hex"
          v-model="color"
          show-alpha
          @active-change="colorChange"
          :predefine="predefineColors"
        />
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { BrushFilled } from "@element-plus/icons-vue";
import { reactive, ref } from "@vue/reactivity";
import { watch } from "vue-demi";
import { useStore } from "vuex";
import Cookies from "js-cookie";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  methods: {
    exit() {
      ElMessageBox.confirm("确定退出", {
        type: "error",
        cancelButtonClass: "cancel-button",
      })
        .then(() => {
          ElMessage.error("已退出");
          Cookies.remove("token");
          this.$router.push("login");
        })
        .catch((e) => void e);
    },
  },
  components: {
    BrushFilled,
  },
  setup(prop, context) {
    const store = useStore();
    const color = ref(store.state.theme);
    const predefineColors = reactive([
      "#ff4500",
      "#ff8c00",
      "#ffd700",
      "#90ee90",
      "#00ced1",
      "#1e90ff",
      "#c71585",
      "rgba(255, 69, 0, 0.68)",
      "rgb(255, 120, 0)",
      "hsv(51, 100, 98)",
      "hsva(120, 40, 94, 0.5)",
      "hsl(181, 100%, 37%)",
      "hsla(209, 100%, 56%, 0.73)",
      "#c7158577",
    ]);
    function colorChange(e) {
      context.emit("update:color", e);
    }
    watch(color, (n) => {
      context.emit("update:color", n);
      store.commit("themeChange", n);
    });
    // reactive 参数必须为json/arr
    const show = ref(false);
    function fade(e) {
      show.value = e;
    }
    return {
      fade,
      color,
      colorChange,
      predefineColors,
    };
  },
};
</script>

<style scoped lang="scss">
.vertical-center {
  display: flex;
  align-items: center;
  justify-content: var(--horizontal);
  height: var(--el-header-height, 45px);
}
@media screen and (max-width: 770px) {
  .top-title {
    display: none;
  }
}
.mouse {
  cursor: pointer;
  transition: transform 0.12s;
}
.off-left {
  margin-right: 20px;
}
.scale {
  transform: scale(1.2);
}
</style>